<template>
  <el-card>
    <!-- 查询条件区域 -->
    <div style="margin-bottom: 16px; display: flex; align-items: center; gap: 12px;">
      <el-input v-model="searchForm.name" placeholder="用户名" clearable style="width: 180px;" />
      <el-date-picker v-model="searchForm.createTime" type="date" placeholder="创建时间" style="width: 180px;" clearable />
      <el-input v-model="searchForm.phone" placeholder="手机号" clearable style="width: 180px;" />
      <el-button type="primary" @click="onSearch">查询</el-button>
      <el-button @click="onReset">重置</el-button>
    </div>
    <el-table :data="tableData" border style="width: 100%" @selection-change="handleSelectionChange" ref="userTable">
      <el-table-column type="selection" width="55" align="center" />
      <el-table-column prop="userId" label="ID" align="center" />
      <el-table-column prop="name" label="用户名" align="center" />
      <el-table-column prop="phone" label="手机号" align="center" />
      <el-table-column prop="roleId" label="角色ID" align="center" />
      <el-table-column prop="createName" label="创建人" align="center" />
      <el-table-column prop="createTime" label="创建时间" align="center">
        <template #default="scope">
          {{ scope.row.createTime.substring(0, 10).split('T')[0] }}
        </template>
      </el-table-column>
      <el-table-column prop="updateName" label="更新人" align="center" />
      <el-table-column prop="updateTime" label="更新时间" align="center">
        <template #default="scope">

          {{ scope.row.createTime.substring(0, 10).split('T')[0] }}
        </template>

      </el-table-column>
      <el-table-column label="操作" align="center">
        <template #default="scope">
          <el-button type="primary" plain size="small" @click="onDetail(scope.row)"
            style="margin-right: 8px;">详情</el-button>
          <el-button type="primary" plain size="small" @click="onEdit(scope.row)"
            style="margin-right: 8px;">编辑</el-button>
          <el-button type="danger" plain size="small" @click="Del(scope.row.userId)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div style="margin-top: 20px; display: flex; justify-content: space-between; align-items: center;">
      <div>
        当前第 <b>{{ pageIndex }}</b> 页 / 共 <b>{{ totalPage }}</b> 页
      </div>
      <el-pagination v-model:current-page="pageIndex" v-model:page-size="pageSize" :total="totalCount"
        :page-sizes="[5, 10, 15, 20]" layout="total, sizes, prev, pager, next, jumper"
        @current-change="handleCurrentChange" @size-change="handleSizeChange" background />
    </div>
    <el-dialog v-model="detailDialogVisible" title="用户详情" width="400px">
      <el-descriptions :column="1" border>
        <el-descriptions-item label="ID">{{ detailRow.userId }}</el-descriptions-item>
        <el-descriptions-item label="用户名">{{ detailRow.name }}</el-descriptions-item>
        <el-descriptions-item label="手机号">{{ detailRow.phone }}</el-descriptions-item>
        <el-descriptions-item label="角色ID">{{ detailRow.roleId }}</el-descriptions-item>
        <el-descriptions-item label="创建人">{{ detailRow.createName }}</el-descriptions-item>
        <el-descriptions-item label="创建时间">{{ detailRow.createTime }}</el-descriptions-item>
        <el-descriptions-item label="更新人">{{ detailRow.updateName }}</el-descriptions-item>
        <el-descriptions-item label="更新时间">{{ detailRow.updateTime }}</el-descriptions-item>
      </el-descriptions>
      <template #footer>
        <el-button @click="detailDialogVisible = false">关闭</el-button>
      </template>
    </el-dialog>
  </el-card>
</template>

<script setup lang="ts">
import { ref, onMounted, computed } from 'vue'
import axios from 'axios'
import { ElMessageBox, ElMessage } from 'element-plus'

// 查询表单
const searchForm = ref({
  name: '',
  createTime: '',
  phone: ''
})

const tableData = ref([])
const pageIndex = ref(1)
const pageSize = ref(5)
const totalCount = ref(0)
const totalPage = computed(() => Math.ceil(totalCount.value / pageSize.value))

const getList = async () => {
  const res = await axios.get('http://localhost:5161/api/Login/ListUserInfo', {
    params: {
      PageIndex: pageIndex.value,
      PageSize: pageSize.value,
      name: searchForm.value.name,
      createTime: searchForm.value.createTime ? searchForm.value.createTime : '',
      phone: searchForm.value.phone
    }
  })
  if (res.data.code === 0) {
    tableData.value = res.data.data.data
    totalCount.value = res.data.data.totalCount
  }
}

// 查询按钮
const onSearch = () => {
  pageIndex.value = 1;
  getList();
}

// 重置按钮
const onReset = () => {
  searchForm.value = { name: '', createTime: '', phone: '' };
  pageIndex.value = 1;
  getList();
}

// 切换页码
const handleCurrentChange = (val: number) => {
  pageIndex.value = val
  getList()
}

// 切换每页条数
const handleSizeChange = (val: number) => {
  pageSize.value = val
  pageIndex.value = 1 // 切换每页条数时回到第一页
  getList()
}

// 操作列按钮方法
const onDetail = (row: any) => {
  detailRow.value = row
  detailDialogVisible.value = true
}
const onEdit = (row: any) => {
  // 编辑逻辑
  console.log('编辑', row);
}
//删除
const Del = (userId: number) => {
  ElMessageBox.confirm(
    '确认删除吗?',
    '提示',
    {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(() => {
      axios.delete("http://localhost:5153/api/UserInfos/DelUser?userId=" + userId).then((res) => {
        if (res.data.code == 0) {
          ElMessage.success("删除成功")
          getList()
        }
      })
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: 'Delete canceled',
      })
    })
}

const userTable = ref()
const selectedRows = ref<any[]>([])

function handleSelectionChange(val: any[]) {
  selectedRows.value = val
}

const detailDialogVisible = ref(false)
const detailRow = ref<any>({})

onMounted(() => {
  getList()
})
</script>

<style scoped>
/* 可根据需要自定义表格样式 */
</style>
